<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title><%= web_title%></title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
  <link rel="stylesheet" href="/layuiadmin/style/login.css" media="all">
</head>
<body style="background-color: #2c374b">
<div style="padding-top: 200px">
    <div style="margin:0 auto;width: 530px;height: 330px;background-color: #273244;border-radius: 5px">
        <h1 style="color: #fff9ec;text-align: center;padding: 10px 0">系统登录</h1>
        <div style="padding: 10px 40px;position: relative">
            <i class="layui-icon layui-icon-user" style="position: absolute;font-size: 20px;top: 25px;left: 50px;color: #8698a6"></i>
            <input type="text" id="sys_loginname" style="width: 406px;height:40px;padding-left: 40px;background-color: #242d3e;border:1px solid #384053;color: #8698a6;border-radius: 5px;padding-top: 5px;padding-bottom: 5px" />
        </div>
        <div style="padding: 0px 40px;position: relative">
            <i class="layui-icon layui-icon-password" style="position: absolute;font-size: 20px;top: 15px;left: 50px;color: #8698a6"></i>
            <input type="password" id="sys_loginpwd" style="width: 406px;height:40px;padding-left: 40px;background-color: #242d3e;border:1px solid #384053;color: #8698a6;border-radius: 5px;padding-top: 5px;padding-bottom: 5px" />
        </div>
        <div style="padding: 10px 40px">
            <input type="text" id="captchaImage" style="width: 200px;height: 40px;background-color:#242d3e;border:1px solid #384053;color: #8698a6;border-radius: 5px;padding: 5px 25px" />
            <div style="display: inline-block;vertical-align: top;margin-top: 5px;margin-left: 30px;" id="AuthImg"></div>
        </div>
        <div style="padding: 10px 40px">
            <button id="Login" style="background-color: #356cff;width: 446px;border: 1px solid #384053;color: #fff9ec;padding: 6px 0;cursor:pointer">登录</button>
        </div>
    </div>
</div>

  <script src="/layuiadmin/layui/layui.js"></script>  
  <script>
  layui.config({
    base: '/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'user'], function(){
    var $ = layui.$
    ,setter = layui.setter
    ,admin = layui.admin
    ,form = layui.form
    ,router = layui.router()
    ,search = router.search;
    form.render();
    AuthCode()
    function AuthCode(){
      let _this = this;
      $.ajax({
        type:"get",
        url:"/admin/v1/api/captchaImage",
        success:function(result){
          let Img = document.querySelector("#AuthImg");

          console.log(result)
          Img.innerHTML = result.Result.img
        }
      })
    }
    document.querySelector("#AuthImg").addEventListener("click",function(){
      AuthCode();
    })
    //提交
      document.querySelector("#Login").addEventListener("click",function(){
          let sys_loginname = document.querySelector("#sys_loginname").value;
          let sys_loginpwd = document.querySelector("#sys_loginpwd").value;
          let captchaImage = document.querySelector("#captchaImage").value;
          let Login = document.querySelector("#Login");
          if(!sys_loginname){
              layer.msg('请输入用户名', {
                  offset: '15px'
                  ,icon: 1
              });
              return false;
          }
          if(!sys_loginpwd){
              layer.msg('请输入密码', {
                  offset: '15px'
                  ,icon: 1
              });
              return false;
          }
          if(!captchaImage){
              layer.msg('请输入验证码', {
                  offset: '15px'
                  ,icon: 1
              });
              return false;
          }
          let html = "<i style=\"display:inline-block;color: white\" class=\"layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop\" ></i>登录中";
          Login.innerHTML = html;
          $.ajax({
              type:"post",
              url:"/admin/v1/api/login",
              data:{sys_loginname:sys_loginname,sys_loginpwd:sys_loginpwd,captchaImage:captchaImage},
              success:function(result){
                  Login.innerHTML = "登录"
                  AuthCode()
                  if(result.ErrorCode == 0){
                      //登入成功的提示与跳转
                      layer.msg(result.ErrorMessage, {
                          offset: '15px'
                          ,icon: 1
                          ,time: 1000
                      }, function(){
                          location.href = '/admin/index'; //后台主页
                      });
                  }else{
                      layer.msg(result.ErrorMessage);
                  }
              }
          })
      })
  });
  </script>
</body>
</html>